<script setup>
import {reactive, ref, computed, onMounted} from "vue";
import EditPop from "../components/Editpop.vue";
import Pagination from "../components/Pagination.vue";
import {getCourseList, getCourseUpdate} from "../api/index";
import emitter from "@/utils/eventBus";
// 初始化的数据
const data=reactive({
  list:[],
  total: '',//课程总数
  page:1,//默认展示第1页
  sideCategory:'font', //课程的分类
})

// 课程列表数据
const getCourseData=async (query)=>{
  const category=query?.category|| data.sideCategory
  const page=query?.page||1
  const size=query?.size||5
  const res=await getCourseList({category,page,size})
  console.log(res)
  // 筛选符合分类的课程
  data.list=res.data?.list.filter((item)=>(item.category===category))
  data.total=res.data.total
}
onMounted(()=>{
  getCourseData()
  // 监听课程类目切换
  emitter.on('course',(val)=>{
    data.sideCategory=val
    data.page=1
    getCourseData({ category: val, page: 1})
  })
})

// 分页的逻辑
const pageChange=(val)=>{
  if(val==='pre'){
    if(data.page>1){
      data.page--
    }else{
      ElMessage({
        message:'已经是第一页了!',
        type:'warning',
        showClose:true
      })
    }

  }
  if(val==='next'){
    if(data.page<Math.ceil(data.total/5)){
      data.page++
    }else{
      ElMessage({
        message:'已经是最后一页了!',
        type:'warning',
        showClose:true
      })
    }

  }
  // 请求课程的接口
  getCourseData({category:data.sideCategory,page:data.page})
}

// 搜索框的初始逻辑和数据
const inputValue=ref('')
// 搜索逻辑
const courseList=computed(()=>{
  return data.list?.filter((item)=>{
    return item.title.indexOf(inputValue.value) > -1
  })
})
// 搜索按钮
const headleClick=()=>{
  if(inputValue.value){
    ElMessage({
      message:'搜索成功',
      type:'success'
    })
  }else{
    ElMessage({
      message:'请输入搜索内容',
      type:'error'
    })
  }
}

// 编辑相关的逻辑
const getChangeCourseData=async (query)=>{
  const {title,price,id}=query
  console.log(title,price,id)
  const res=await getCourseUpdate({title,price,id})
  console.log(res)
  if(res?.message){
    ElMessage({
      message: res.message,
      type: 'success',
    })
  }
}
// 编辑的数据
const courseItem=reactive({
  message:{}
})
// 控制编辑弹窗的显示
const popShows=ref(false)
// 控制弹窗展示的方法
const isShowPop=(val)=>{
  popShows.value=val
}
const editClick=(val)=>{
  isShowPop( true)
  courseItem.message=val
  console.log(courseItem.message)
}
const confirmClick = (type) => {
  if (type === 'cancel') {
    isShowPop( false)
  }else if(type.title!==courseItem.message.title||type.price!==courseItem.message.price){
    // 修改对应课程的标题和价格
    data.list.map((item)=>{
      if(item.id===type.id){
        item.title=type.title
        item.price=type.price
      }
    })
    // 修改完成关闭弹窗
    isShowPop( false)
// 修改接口的调用
    getChangeCourseData({title:type.title,price:type.price,id:type.id})
  }else{
    ElMessage({
      message: '没有发现有更该的内容。',
      showClose: true,
      type: 'warning'
    })
  }
}

// 课程删除逻辑
const deleteHandle=(val)=>{
  if(val){
  // .filter筛选
    data.list=data.list.filter((item)=>{
      return item.id!==val
    })
    // 删除接口的调用
  }
}
</script>
<template>
<div class="main">
<!--  搜索-->
  <el-form>
    <el-form-item >
      <el-input v-model.trim="inputValue" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-button type="primary" @click="headleClick">搜索</el-button>
  </el-form>

  <Table :list="courseList" :editClick="editClick" :deleteHandle="deleteHandle"/>
<!--  分页-->
  <Pagination :pageChange="pageChange" ></Pagination>
</div>
<EditPop v-model="popShows" v-if="popShows"  :message="courseItem.message" :confirmClick="confirmClick"/>

</template>

<style scoped>
.main_seach{
  position: static;
  z-index: 10;
}
:deep(.warning-row){
  background-color: #def1c4;

}
:deep(.el-form ){
  display: flex;
}
</style>